<template>
  <div class="historicaldetails">
    <div class="tit">
      <span
        class="goback" style="font-size: .2rem;font-weight: 700;">相机分布</span>
      <span style="font-size: .2rem;margin:0 .1rem;">></span>
      <span style="font-size: .2rem;font-weight: 700;">详情</span>

      <div style="position: absolute;right: .2rem;">
        <el-button @click="gohistory" size="small">返回</el-button>
      </div>
    </div>
    <!--tab-->
    <div style="padding-left: .2rem;">
      <el-tabs v-model="activeName">
        <el-tab-pane label="照片展示" name="first">照片展示</el-tab-pane>
        <el-tab-pane label="信息修改" name="second">信息修改</el-tab-pane>
      </el-tabs>
    </div>
    <!--tab-->
    <div v-show="activeName=='second'">
      <div class="basemessage">
        <div style="flex: 6">
          <div class="tit2">
            <span style="margin-right: .1rem;">基本信息</span>
            <span
              v-if="abilityList.indexOf('edit') != -1"
              @click="opisbm"
              style="cursor: pointer;background-color: #00CC46;padding:3px;border-radius:10px;color:#FFFFFF"
              class="el-icon-edit"></span>
          </div>
          <div style="margin-top: .1rem;width: 100%;">
            <table class="heee">
              <thead>
              <th style="width: 11%;">设备编号</th>
              <th style="width: 20%;">布设时间</th>
              <th style="width: 12.5%;">海拔</th>
              <th style="width: 12.5%;">经度</th>
              <th style="width: 12.5%;">纬度</th>
              <th style="width: 12.5%;">布设人</th>
              </thead>
              <tbody>
              <tr>
                <td>{{filtration(msg.imei)}}</td>
                <td>{{msg.layTime|convertDate}}</td>
                <td>{{filtration(msg.altitude)}}</td>
                <td>{{filtration(typeof (msg.lon) == 'number' ? msg.lon.toFixed(5) : '')}}</td>
                <td>{{filtration(typeof (msg.lat) == 'number' ? msg.lat.toFixed(5) : '')}}
                <td>{{filtration(msg.layUser)}}
                </td>
              </tr>
              </tbody>
            </table>
          </div>
          <div class="tit2">
            <span style="margin-right: .1rem;">生境信息</span>
            <span
              v-if="abilityList.indexOf('edit') != -1"
              @click="opnesj"
              style="cursor: pointer;background-color: #00CC46;padding:3px;border-radius:10px;color:#FFFFFF"
              class="el-icon-edit"></span>
          </div>
          <div style="margin-top: .1rem;">
            <table>
              <thead>
              <th>坡向</th>
              <th>乔木高度</th>
              <th>生境类型</th>
              <th>森林起源</th>
              <th>草本高度</th>
              </thead>
              <tbody>
              <tr>
                <td>{{filtration(msg.exposure)}}</td>
                <td>{{filtration(msg.qiaomuHeight)}}</td>
                <td>{{filtration(msg.envirType)}}</td>
                <td>{{filtration(msg.forestOrigin)}}</td>
                <td>{{filtration(msg.caobenHeight)}}</td>
              </tr>
              </tbody>
            </table>
            <table>
              <thead>
              <th>草本盖度</th>
              <th>灌木高度</th>
              <th>乔木郁闭度</th>
              <th>乔木胸径</th>
              <th>干扰频率</th>
              </thead>
              <tbody>
              <tr>
                <td>{{filtration(msg.caobenCanopyDensity)}}</td>
                <td>{{filtration(msg.guanmuHeight)}}</td>
                <td>{{filtration(msg.qiaomuCanopyDensity)}}</td>
                <td>{{filtration(msg.qiaomuBraHeight)}}</td>
                <td>{{filtration(msg.interfRate)}}</td>
              </tr>
              </tbody>
            </table>
            <table>
              <thead>
              <th>草本优势种</th>
              <th>灌木优势树种</th>
              <th>动物痕迹</th>
              <th>灌木盖度</th>
              <th>干扰类型</th>
              </thead>
              <tbody>
              <tr>
                <td>{{filtration(msg.caobenAdvantageSpecies)}}</td>
                <td>{{filtration(msg.shrubsAdvantageSpecies)}}</td>
                <td>{{filtration(msg.traceAnimal)}}</td>
                <td>{{filtration(msg.guanmuCanopyDensity)}}</td>
                <td>{{filtration(msg.interfType)}}</td>
              </tr>
              </tbody>
            </table>
            <table>
              <thead>
              <th>痕迹类型</th>
              <th>干扰强度</th>
              <th>小生境</th>
              <th>固定资产卡片编码</th>
              <th>总备注</th>
              </thead>
              <tbody>
              <tr>
                <td>{{filtration(msg.traceType)}}</td>
                <td>{{filtration(msg.interfStrength)}}</td>
                <td>{{filtration(msg.smallEnvir)}}</td>
                <td>{{filtration(msg.fixedAssetCode)}}</td>
                <td>{{filtration(msg.remark)}}</td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div style="flex: 4;position: relative">
          <div class="big_image_set">
            <div class="alpt" title="查看大图">
              <viewer :images="sjpList" style="opacity: 0">
                <img v-for="src in sjpList" :src="src" :key="src" width="50">
              </viewer>
            </div>
            <div v-if="abilityList.indexOf('edit') != -1" title="上传照片" @click="upimg">
              <img src="../../static/images/上传.png" alt="">
            </div>
            <div v-if="abilityList.indexOf('edit') != -1" title="删除" @click="delimg">
              <img src="../../static/images/del.png" alt="">
            </div>
          </div>

          <div class="sjp">
            <div>
              <img
                @click="sjpl"
                src="../../static/images/icon/l.png" alt="">
            </div>
            <div>
              <img
                @click="sjpr"
                src="../../static/images/icon/r.png" alt="">
            </div>
            <div>
              <span>{{sjpnum}}/{{sjpList.length}}</span>
            </div>
            <img v-if="sjpList.length==0" src="../../static/images/np.jpg" alt="">
            <img :src="sjpList[sjpnum -1]" v-else alt="">
          </div>

          <!-- <div style="width: 7rem;height: 1.2rem;margin-top: .2rem;overflow-x: auto;overflow-y: hidden">
             <div :style="{width:1.7*sjpList.length+'rem' }" class="clearfix">
               <div class="smimg" v-for="sj in sjpList">
                 <img :src="sj+'@oosImage|30p'" alt="">
               </div>
             </div>

           </div>-->

        </div>
      </div>
    </div>

    <div v-show="activeName=='first'">
      <!--照片展示-->
      <div class="p_main">
        <div>
          <div class="l_nav">
            <CLB :sample-id="HDD.id"></CLB>
            <div>
              <div
                :style="si.color?'background-color: #1FB456;':'background-color: #ccc;'"
                v-for="(si,index) in species"
                @click="speciesParticulars(si,index)"
              >{{ si.keyWord}}{{si.time}}
              </div>
            </div>

          </div>
          <div class="r_main" v-if="!detailsok" style="align-items: center;justify-content: center">
            <img src="../../static/images/np.jpg" alt="">
          </div>
          <div class="r_main" v-if="detailsok">
            <div>
              <div class="big_photo">
                <div class="left">
                  <div @click="previous_page">
                    <img src="../../static/images/icon/l.png" alt="">
                  </div>
                </div>
                <div class="main">
                  <!--isMp4-->
                  <img v-if="state == 0&&isMp4(no_phot)=='照片'" :src="masterMap(no_phot)" alt="">
                  <video v-if="state == 0&&isMp4(no_phot)=='视频'" :src="isvideocloud(no_phot)"
                         controls="controls"></video>
                  <img v-if="state == 1" :src="masterMap(no_phot)" alt="">
                </div>
                <div class="right">
                  <div @click="next_page">
                    <img src="../../static/images/icon/r.png" alt="">
                  </div>
                  <div>
                    {{ now_pn }}/{{ all_pn }}
                  </div>
                </div>
              </div>

              <!--轮播图-->
              <div style="margin-top: .2rem;">
                <ul class="carousel">
                  <li v-for="(cs,index) in carousel" @click="replace_photo(cs,index)">
                    <div
                      :style="cs.color?'border: 0.03rem solid #1FB456;':'border: 0.01rem solid #cccccc;'"
                    >
                      <img v-if="isMp4(cs.accessorySrc)=='照片'" :src="cs.accessorySrc" alt="">
                      <img v-if="isMp4(cs.accessorySrc)=='视频'" src="../../static/images/shipin.jpg" alt="">
                      <div>
                        <span>{{ incision(cs.shootingTime) }}</span>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
              <!--轮播图-->

            </div>
            <div>
              <div class="basic_title">
                <span></span>
                <span>基本信息</span>
              </div>
              <ul>
                <li class="clearfix"><span>物种名称</span><span>{{ filtration(speciesdatails.speciesName) }}</span></li>
                <li class="clearfix"><span>鉴定人</span><span>{{ filtration(speciesdatails.identifyPeople) }}</span></li>
                <li class="clearfix"><span>温度</span><span>{{ filtration(speciesdatails.temperature) }}℃</span></li>
                <li class="clearfix"><span>照片编号</span><span>{{ filtration(speciesdatails.imageName) }}</span></li>
                <li class="clearfix"><span>照片质量</span><span>{{ filtration(speciesdatails.imageQuality) }}</span></li>
                <li class="clearfix"><span>物种数量</span><span>{{ filtration(speciesdatails.animalNum) }}</span></li>
                <li class="clearfix"><span>物质类别</span><span>{{ filtration(speciesdatails.objType) }}</span></li>
                <li class="clearfix"><span>物种性别</span><span>{{ filtration(speciesdatails.speciesGender) }}</span></li>
                <li class="clearfix"><span>备注</span><span>{{ filtration(speciesdatails.remark) }}</span></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <!--照片展示-->
    </div>

    <div class="modification" v-show="isbm">
      <div class="mfcr">
        <div class="mtit">
          <span>修改基本信息</span>
        </div>
        <div style="margin-top: .1rem;">
          <el-form ref="form" label-width="100px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="设备编号">
                  <el-input v-model="HDD.imei" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="布设时间">
                  <el-date-picker
                    style="width: 100%"
                    v-model="layDate"
                    @change="getLayTime"
                    type="datetime"
                    :default-value="c_time(HDD.layTime)"
                    placeholder="请选择时间">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="经度">
                  <el-input v-model="HDD.lon"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="纬度">
                  <el-input v-model="HDD.lat"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="海拔">
                  <el-input v-model="HDD.altitude"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="布设人">
                  <el-input v-model="HDD.layUser"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item style="text-align: center">
              <el-button @click="quite">取消</el-button>
              <el-button type="primary" @click="onSubmit">确认修改</el-button>
            </el-form-item>

          </el-form>

        </div>
      </div>
    </div>
    <div class="modification" v-show="issj">
      <div class="mfcr">
        <div class="mtit">
          <span>修改生境信息</span>
        </div>

        <div style="margin-top: .1rem;">
          <el-form ref="form" label-width="120px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="坡向">
                  <!--<el-input v-model="HDD.exposure"></el-input>-->
                  <el-select style="width: 100%;" v-model="HDD.exposure" placeholder="请选择坡向">
                    <el-option label="东" value="东"></el-option>
                    <el-option label="东南" value="东南"></el-option>
                    <el-option label="南" value="南"></el-option>
                    <el-option label="西南" value="西南"></el-option>
                    <el-option label="西" value="西"></el-option>
                    <el-option label="西北" value="西北"></el-option>
                    <el-option label="北" value="北"></el-option>
                    <el-option label="东北" value="东北"></el-option>
                    <el-option label="无坡向" value="无坡向"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="乔木高度">
                  <el-input v-model="HDD.qiaomuHeight"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="生境类型">
                  <!--<el-input v-model="HDD.envirType"></el-input>-->
                  <el-select style="width: 100%;" v-model="HDD.envirType" placeholder="请选择生境类型">
                    <el-option label="常阔" value="常阔"></el-option>
                    <el-option label="常阔混交" value="常阔混交"></el-option>
                    <el-option label="落阔" value="落阔"></el-option>
                    <el-option label="针阔混交" value="针阔混交"></el-option>
                    <el-option label="针叶林" value="针叶林"></el-option>
                    <el-option label="灌丛" value="灌丛"></el-option>
                    <el-option label="草坡" value="草坡"></el-option>
                    <el-option label="流石滩" value="流石滩"></el-option>
                    <el-option label="滩涂" value="滩涂"></el-option>
                    <el-option label="苇塘" value="苇塘"></el-option>
                    <el-option label="水面" value="水面"></el-option>
                    <el-option label="草甸" value="草甸"></el-option>
                    <el-option label="沼泽" value="沼泽"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="森林起源">
                  <!--<el-input v-model="HDD.forestOrigin"></el-input>-->
                  <el-select style="width: 100%;" v-model="HDD.forestOrigin" placeholder="请选择森林起源">
                    <el-option label="原始林" value="原始林"></el-option>
                    <el-option label="次生林" value="次生林"></el-option>
                    <el-option label="人工林" value="人工林"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="草本高度">
                  <el-input v-model="HDD.caobenHeight"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="草本盖度">
                  <!--<el-input v-model="HDD.forestOrigin"></el-input>-->
                  <el-select style="width: 100%;" v-model="HDD.caobenCanopyDensity" placeholder="请选择草本盖度">
                    <el-option label="0~15%" value="0~15%"></el-option>
                    <el-option label="15%~30%" value="15%~30%"></el-option>
                    <el-option label="30%~45%" value="30%~45%"></el-option>
                    <el-option label="45%~60%" value="45%~60%"></el-option>
                    <el-option label="60%~80%" value="60%~80%"></el-option>
                    <el-option label="＞80%" value="＞80%"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="灌木高度">
                  <el-input v-model="HDD.guanmuHeight"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="乔木郁闭度">
                  <!--<el-input v-model="HDD.qiaomuCanopyDensity"></el-input>-->
                  <el-select style="width: 100%;" v-model="HDD.qiaomuCanopyDensity" placeholder="请选择乔木郁闭度">
                    <el-option label="0~15%" value="0~15%"></el-option>
                    <el-option label="15%~30%" value="15%~30%"></el-option>
                    <el-option label="30%~45%" value="30%~45%"></el-option>
                    <el-option label="45%~60%" value="45%~60%"></el-option>
                    <el-option label="60%~80%" value="60%~80%"></el-option>
                    <el-option label="＞80%" value="＞80%"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="乔木胸径">
                  <el-input v-model="HDD.qiaomuBraHeight"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="干扰频率">
                  <!--<el-input v-model="HDD.interfRate"></el-input>-->
                  <el-select style="width: 100%" v-model="HDD.interfRate" placeholder="请选择干扰频率">
                    <el-option label="经常" value="经常"></el-option>
                    <el-option label="很少" value="很少"></el-option>
                    <el-option label="一般" value="一般"></el-option>
                    <el-option label="一般" value="一般"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="灌木优势种">
                  <el-input v-model="HDD.shrubsAdvantageSpecies"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="动物痕迹">
                  <el-input v-model="HDD.traceAnimal"></el-input>
                </el-form-item>
              </el-col>

            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="灌木盖度">
                  <!--<el-input v-model="HDD.guanmuCanopyDensity"></el-input>-->
                  <el-select style="width: 100%;" v-model="HDD.guanmuCanopyDensity" placeholder="请选择灌木盖度">
                    <el-option label="0~15%" value="0~15%"></el-option>
                    <el-option label="15%~30%" value="15%~30%"></el-option>
                    <el-option label="30%~45%" value="30%~45%"></el-option>
                    <el-option label="45%~60%" value="45%~60%"></el-option>
                    <el-option label="60%~80%" value="60%~80%"></el-option>
                    <el-option label="＞80%" value="＞80%"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="干扰类型">
                  <!--<el-input v-model="HDD.interfType"></el-input>-->
                  <el-select style="width: 100%" v-model="HDD.interfType" placeholder="请选择干扰类型">
                    <el-option label="放牧" value="放牧"></el-option>
                    <el-option label="旅游" value="旅游"></el-option>
                    <el-option label="公路" value="公路"></el-option>
                    <el-option label="采伐" value="采伐"></el-option>
                    <el-option label="打猎" value="打猎"></el-option>
                    <el-option label="挖药" value="挖药"></el-option>
                    <el-option label="挖矿" value="挖矿"></el-option>
                    <el-option label="居民区" value="居民区"></el-option>
                    <el-option label="农业生产" value="农业生产"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="痕迹类型">
                  <!--<el-input v-model="HDD.traceType"></el-input>-->
                  <el-select style="width: 100%" v-model="HDD.traceType" placeholder="请选择痕迹类型">
                    <el-option label="动物实体" value="动物实体"></el-option>
                    <el-option label="粪便" value="粪便"></el-option>
                    <el-option label="脚印" value="脚印"></el-option>
                    <el-option label="取食痕迹" value="取食痕迹"></el-option>
                    <el-option label="挖掘痕迹" value="挖掘痕迹"></el-option>
                    <el-option label="动物身体遗落物" value="动物身体遗落物"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="干扰强度">
                  <!--<el-input v-model="HDD.interfStrength"></el-input>-->
                  <el-select style="width: 100%" v-model="HDD.interfStrength" placeholder="请选择干扰强度">
                    <el-option label="强" value="强"></el-option>
                    <el-option label="中" value="中"></el-option>
                    <el-option label="弱" value="弱"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="小生境">
                  <!--<el-input v-model="HDD.smallEnvir"></el-input>-->
                  <el-select style="width: 100%" v-model="HDD.smallEnvir" placeholder="请选择小生境">
                    <el-option label="河边" value="河边"></el-option>
                    <el-option label="林下" value="林下"></el-option>
                    <el-option label="竹林中" value="竹林中"></el-option>
                    <el-option label="草丛" value="草丛"></el-option>
                    <el-option label="树洞" value="树洞"></el-option>
                    <el-option label="岩下" value="岩下"></el-option>
                    <el-option label="公路上" value="公路上"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="草本优势种">
                  <el-input v-model="HDD.caobenAdvantageSpecies"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="固定资产卡片编码">
                  <el-input v-model="HDD.fixedAssetCode"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="总备注">
                  <el-input v-model="HDD.remark"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item style="text-align: center">
              <el-button @click="isno">取消</el-button>
              <el-button type="primary" @click="isOk">确认修改</el-button>
            </el-form-item>

          </el-form>
        </div>
      </div>
    </div>

    <!--上传 B-->
    <div class="uploadBox" v-if="uploadBox">
      <div>
        <div class="photoList">
          <el-upload
            :data="upd.data"
            :action="upd.action"
            list-type="picture-card"
            accept="video/*||image/*"
            :auto-upload="false"
            :http-request="ImageRequest"
            ref="upload"
            multiple>
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </div>

        <div class="start">
          <el-button size="mini" type="success" @click="submitUpload">开始上传</el-button>
          <el-button size="mini" type="primary" @click="closeuploadBox">结束上传</el-button>
        </div>

      </div>
    </div>
    <!--上传 E-->
  </div>
</template>
<script>
  import api from '../utils/api'
  import http from '../utils/http'
  import clb from './calendar.vue'

  export default {
    components: {
      'CLB': clb
    },
    data() {
      return {
        activeName: "first",
        HDD: {},
        sjpList: [],
        sjpnum: 1,
        layDate: "",
        recycleDate: "",
        isbm: false,
        issj: false,
        detailsok: true,
        carousel: [],
        speciesdatails: [],
        species: [],
        no_phot: "../../static/images/np.jpg",
        now_pn: 0,
        all_pn: 0,
        state: 0,
        animalName: "",
        signImages: [''],
        dialogImageUrl: '',
        dialogVisible: false,
        uploadBox: false,
        upd: {
          action: api.infrared.updateImg,
          data: {
            id: "",
          }
        },
        datafiles: [],
        t1: "",
        msg: {},
        abilityList: []
      }
    },
    created() {
      this.HDD = JSON.parse(sessionStorage.getItem('HDD'));
      this.layDate = this.c_time(this.HDD.layTime)
      this.getLayTime(this.layDate)
      this.msg = JSON.parse(sessionStorage.getItem('HDD'))
      this.getenvirImageList();
      this.abilityList = sessionStorage.getItem('abilityList');
    },
    mounted() {
      this.openisivdetails(this.HDD);
    },
    methods: {
      openisivdetails(data) {
        var time = new Date();
        var year = time.getFullYear();
        var month = time.getMonth() + 1;
        var date = time.getDate();
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (date >= 0 && date <= 9) {
          date = "0" + date;
        }
        this.t1 = year + "-" + month + "-" + date;
        this.upd.data.id = data.id;
        this.sampleId = data.id;
        let vm = this;
        (async function () {
          let res = await http.get(api.infrared.todayGrouping + '?sampleId=' + data.id)
          if (res.data.code == '200') {
            vm.trandate(vm.t1);
          } else {
            alert('网络数据异常')
          }
        })()
      },

      trandate(date) {
        $(".carousel").stop().animate({left: 0}, 500)
        var vm = this;
        (async function () {
          let re = await http.get(api.infrared.todayAuthenticate + "?sampleId=" + vm.HDD.id + '&date=' + date)
          if (re.data.code == '200') {
            if (re.data.data.length > 0) {
              vm.detailsok = true;
              vm.carousel = re.data.data[0].mediaList;
              vm.speciesdatails = re.data.data[0].mediaList[0];
              vm.species = re.data.data;
              vm.species[0].color = true;
              vm.count_size();
              if (vm.carousel.length > 0) {
                vm.carousel[0].color = true
                if (vm.carousel[0].discernPath != null) {
                  vm.no_phot = vm.carousel[0].discernPath;
                } else {
                  vm.no_phot = vm.carousel[0].accessorySrc;
                }

                vm.now_pn = 1;
                vm.all_pn = vm.carousel.length;
                vm.state = 0;
              } else {
                vm.state = 1;
                var z = {
                  src: "../../static/images/np.jpg",
                  color: false
                }
                vm.carousel.push(z);
              }
            } else {
              vm.detailsok = false;
              vm.species = [];
            }
          }
        })()
      },
      ImageRequest(file) {
        this.datafiles.push(file.file);
      },
      delimg() {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let vm = this;
          (async function f() {
            let res = await http.post(api.infrared.delDateImg + '?id=' + vm.HDD.id + '&url=' + vm.sjpList[vm.sjpnum - 1])
            if (res.data.code == '200') {
              vm.sjpList.splice(vm.sjpnum - 1, 1);
              vm.sjpnum = 1;
              vm.$message({
                type: 'success',
                message: '删除成功!'
              });
            } else {
              alert(res.data.message);
            }
          })()

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      upimg() {
        this.upd.data.id = this.HDD.id;
        this.uploadBox = true;
      },
      getenvirImageList() {
        let vm = this;
        (async function f() {
          let res = await http.post(api.infrared.envirImageList + '?type=realDevice&id=' + vm.HDD.id)
          if (res.data.code == '200') {
            vm.sjpList = res.data.data;
            vm.sjpnum = 1;
          }
        })()
      },
      submitUpload() {
        this.$refs.upload.submit();
        let vm = this;
        let fd = new FormData();
        this.datafiles.forEach(function (file, index) {
          fd.append('files', file, file.name); // 因为要上传多个文件，所以需要遍历一下才行
        })
        fd.append("id", this.HDD.id);
        (async function f() {
          let res = await http.post(api.infrared.updateImg, fd)
          if (res.data.code == '200') {
            vm.$message({
              message: '上传图片成功！',
              type: 'success'
            });
          }
        })()
      },
      closeuploadBox() {
        this.getenvirImageList();
        this.uploadBox = false;
      },
      incision(value) {
        if (value == "" || value == null || value == undefined) {
          return ""
        } else {
          var a = value.split(" ")[0];
          return a;
          return value
        }

      },
      replace_photo(cs, index) {
        if (cs.discernPath != null) {
          this.no_phot = cs.discernPath;
        } else {
          this.no_phot = cs.accessorySrc;
        }
        this.speciesdatails = this.carousel[index];
        this.now_pn = index + 1;
        if (index > 2 && index < this.carousel.length - 2) {
          $(".carousel").stop().animate({left: -(index - 2) * 1.5 + "rem"}, 500)
        }
        if (index <= 2) {
          $(".carousel").stop().animate({left: 0}, 500)
        }

        this.carousel.forEach((e => {
          e.color = false;
        }))
        cs.color = true
      },
      next_page() {
        var ind = 0;
        this.carousel.forEach((e => {
          if (e.color == true) {
            ind = this.carousel.indexOf(e) + 1;
            e.color = false
          }
          return ind
        }))
        if (ind < this.carousel.length) {
          this.carousel[ind].color = true
          this.now_pn = ind + 1;
          if (this.carousel[ind].discernPath != null) {
            this.no_phot = this.carousel[ind].discernPath;
          } else {
            this.no_phot = this.carousel[ind].accessorySrc;
          }
          this.speciesdatails = this.carousel[ind];
        } else {
          this.carousel[this.carousel.length - 1].color = true
        }
        if (ind > 2 && ind < this.carousel.length - 2) {
          $(".carousel").stop().animate({left: -(ind - 2) * 1.5 + "rem"}, 500)
        } else if (ind <= 2) {
          $(".carousel").stop().animate({left: 0}, 500)
        }
      },
      speciesParticulars(si) {
        $(".carousel").stop().animate({left: 0}, 500)
        this.species.forEach((e => {
          e.color = false
        }))
        si.color = true;
        this.carousel = si.mediaList;
        this.speciesdatails = si.mediaList[0];
      },
      previous_page() {
        var ind = 0;
        this.carousel.forEach((e => {
          if (e.color == true) {
            ind = this.carousel.indexOf(e) - 1;
            e.color = false
          }
          return ind
        }))
        if (ind >= 0) {
          this.carousel[ind].color = true
          --this.now_pn;
          if (this.carousel[ind].discernPath != null) {
            this.no_phot = this.carousel[ind].discernPath;
          } else {
            this.no_phot = this.carousel[ind].accessorySrc;
          }

          this.speciesdatails = this.carousel[ind];
        } else {
          this.now_pn = 1;
          this.carousel[0].color = true
        }


        if (ind > 2 && ind < this.carousel.length - 2) {
          $(".carousel").stop().animate({left: -(ind - 2) * 1.5 + "rem"}, 500)
        } else if (ind <= 2) {
          $(".carousel").stop().animate({left: 0}, 500)
        }

      },
      photo_details() {
        var vm = this;
        (async function () {
          let res = await http.get(api.infrared.imageIdentifyList, {
            cameraEnvirId: vm.HDD.id,
            status: 2
          })
          if (JSON.stringify(res.data) != "{}") {
            vm.detailsok = true;
            var arr = [];
            var arrdata = [];
            var arrdate = [];
            for (var k in res.data) {
              var z = {
                name: k,
                color: false
              }
              arr.push(z);
              arrdata.push(res.data[k])
            }
            arrdata[0].data.forEach((e => {
              e["color"] = false
            }))
            arrdata[0].date.forEach((e => {
              var z = {
                value: e
              }
              arrdate.push(z);
            }));
            vm.carousel = arrdata[0].data;
            vm.speciesdatails = arrdata[0].data[0];
//            vm.options2 = arrdate;
            vm.species = arr;
            vm.species[0].color = true;
            vm.count_size();
            if (vm.carousel.length > 0) {
              vm.carousel[0].color = true
              if (vm.carousel[0].discernPath != null) {
                vm.no_phot = vm.carousel[0].discernPath;
              } else {
                vm.no_phot = vm.carousel[0].accessorySrc;
              }

              vm.now_pn = 1;
              vm.all_pn = vm.carousel.length;
              vm.state = 0;
            } else {
              vm.state = 1;
              var z = {
                src: "../../static/images/np.jpg",
                color: false
              }
              vm.carousel.push(z);
            }
          }

          if (JSON.stringify(res.data) == "{}") {
            vm.detailsok = false;
          }

        })()
      },
      //计算尺寸
      count_size() {
        $(".carousel").css("width", this.carousel.length * 1.5 + "rem")
      },

      sjpr() {
        if (this.sjpnum < this.sjpList.length) {
          this.sjpnum++;
        }
      },
      sjpl() {
        if (this.sjpnum > 1) {
          this.sjpnum--;
        }
      },
      onSubmit() {
        var vm = this;
        vm.HDD.urlStr = '';
        (async function () {
          let res = await http.post(api.infrared.updateHabitat, vm.HDD)
          if (res.data.code == '200') {
            vm.success('修改成功');
            vm.isbm = false;
            window.sessionStorage.removeItem('HDD');
            window.sessionStorage.setItem('HDD', JSON.stringify(vm.HDD));
            vm.msg = Object.assign({}, vm.HDD)
          }

        })()
      },
      gohistory() {
        let pageNum = this.$route.query.pageNum;
        this.$router.push({
          path: '/rlc',
          query: {pageNum: pageNum}
        });
        // window.sessionStorage.removeItem('HDD');
      },

      isOk() {
        var vm = this;
        vm.HDD.urlStr = '';
        (async function () {
          let res = await http.post(api.infrared.updateHabitat, vm.HDD
          )
          if (res.data.code == '200') {
            vm.success('修改成功');
            vm.issj = false;
            window.sessionStorage.removeItem('HDD');
            window.sessionStorage.setItem('HDD', JSON.stringify(vm.HDD));
            vm.msg = Object.assign({}, vm.HDD)
          }

        })()
      },
      isno() {
        this.issj = false;
      },
      opnesj() {
        this.issj = true;
      },
      opisbm() {
        this.isbm = true
      },
      quite() {
        this.isbm = false
      },
      //修改布设时间
      getLayTime(datetime) {
        var year = datetime.getFullYear();
        var month = datetime.getMonth() + 1;
        var date = datetime.getDate();
        var Hours = datetime.getHours();
        var Minutes = datetime.getMinutes();
        var Seconds = datetime.getSeconds();
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (date >= 0 && date <= 9) {
          date = "0" + date;
        }
        if (Hours >= 1 && Hours <= 9) {
          Hours = "0" + Hours;
        }
        if (Minutes >= 0 && Minutes <= 9) {
          Minutes = "0" + Minutes;
        }
        if (Seconds >= 1 && Seconds <= 9) {
          Seconds = "0" + Seconds;
        }
        var t1 = year + "-" + month + "-" + date + " " + Hours + ":" + Minutes + ":" + Seconds;
        this.HDD.layTime = t1;
        this.HDD.layTimeLong = new Date(datetime).getTime();
      },
      getrecycleTime(datetime) {
        var year = datetime.getFullYear();
        var month = datetime.getMonth() + 1;
        var date = datetime.getDate();
        var Hours = datetime.getHours();
        var Minutes = datetime.getMinutes();
        var Seconds = datetime.getSeconds();

        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (date >= 0 && date <= 9) {
          date = "0" + date;
        }
        if (Hours >= 1 && Hours <= 9) {
          Hours = "0" + Hours;
        }
        if (Minutes >= 0 && Minutes <= 9) {
          Minutes = "0" + Minutes;
        }
        if (Seconds >= 1 && Seconds <= 9) {
          Seconds = "0" + Seconds;
        }


        var t1 = year + "-" + month + "-" + date + " " + Hours + ":" + Minutes + ":" + Seconds;

        this.HDD.recovDate = t1;
        this.HDD.recovDateLong = new Date(datetime).getTime();
      },
      //时间过滤器
      c_time(e) {
        var a = (new Date(e))
        return a;
      },
      filtration(value) {
        if (value == "" || value == null) {
          return "--"
        } else {
          return value
        }
      },
      //判断云服务or本地服务
      iscloud(p) {
        if (p.split(":")[0] == 'http') {
          return p + '@oosImage|100h'
        }
        if (p.split(":")[0] == 'https') {
          return p + '?x-amz-process=image/resize,h_100,m_lfit'
        }
        return '/iapi' + p
      },
      //原图展示
      masterMap(p) {
        if (p.split(":")[0] == 'http' || p.split(":")[0] == 'https') {
          return p
        } else {
          let arr = p.split("/");
          let str = 'orginal_' + p.split("/")[p.split("/").length - 1];
          arr[arr.length - 1] = str;
          arr = arr.join('/');
          return '/iapi' + arr;
        }
      },
      isMp4(m) {
        let iv = m.split('.');
        if (iv[iv.length - 1].toLowerCase() == 'mp4') {
          return '视频'
        } else {
          return '照片'
        }
      },
      //判断视频来源
      isvideocloud(p) {
        if (p) {
          if (p.split(":")[0] == 'http' || p.split(":")[0] == 'https') {
            return p
          }
          return '/iapi' + p
        }
      },
      //成功
      success(t) {
        this.$message({
          message: t,
          type: 'success'
        });
      },
      //失败
      error(t) {
        this.$message.error(t);
      },
      //警告
      warn(t) {
        this.$message({
          message: t,
          type: 'warning'
        });
      },
    }
  }
</script>
<style scoped>
  @import "../../static/css/historicaldetails.css";
</style>
<style>
  .el-tabs__content {
    display: none;
  }

  #wait .el-form--inline .el-form-item .el-form-item__content {
    width: 58%;
  }

  .el-tabs__content {
    display: none;
  }
</style>
